<template>
	<view class="category">
		<view class="container">
			<view class="slider">
				<view 
				v-for="(item,index) in list" 
				:key="index" 
				:class="item.id == active ? 'sliderItemActive':'sliderItem'"
				@click="changeSlider(item,index)"
				>
					{{item.name}}
				</view>
			</view>
			<view class="goods">
				<scroll-view class="goodsScroll" scroll-y="true" @scrolltolower="isDown">
					<view style="display: flex;flex-wrap: wrap;justify-content: space-between;">
						<view v-for="(item,index) in goods" :key="index" class="goodsItem" @click="toGoodsDetail(item.id)">
							<img style="width: 200rpx;height: 200rpx;" :src="item.goodsImage" alt="" />
							<view class="itemName hideTwo">
								{{item.name}}
							</view>
							<view class="skus hideOne" style="color: #999;margin-bottom: 6px;">
								{{item.skuName}}
							</view>
							<view class="addNum">
								<view>￥{{item.price}}</view>
								<view style="display: flex;align-items: center;">
									<img @click.stop="computingNum(item,1)" v-if="item.orderNum !== 0" style="width: 15px;height: 15px;" src="@/static/jian.png" alt="">
									<view v-if="item.orderNum !== 0" style="margin: 0 4px;color: #000;font-size: 12px;">{{item.orderNum}}</view>
									<img @click.stop="computingNum(item,2)" style="width: 15px;height: 15px;" src="@/static/jia.png" alt="">
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		<view class="modal" v-if="showModal" @click="showModal = false">
			<view class="modalContainer" @click.stop>
				<view class="title">
					<view style="font-weight: bold;font-size: 14px;">已选商品</view>
					<view style="font-size: 12px;color: #c8c8c8;" @click="removeClick">清除已选商品</view>
				</view>
				<view class="goods">
					<scroll-view class="goodsScroll" scroll-y="true" >
						<view style="display: flex;flex-wrap: wrap-reverse;justify-content: space-between;">
							<view v-for="(item,index) in activeGoods" :key="index" class="goodsItem">
								<view style="display: flex;align-items: center;">
									<img style="width: 100rpx;height: 100rpx;margin-right: 10px;" :src="item.goodsImage" alt="" />
									<view class="itemName">
										<view style="margin-bottom: 5px;">{{item.name}}</view>
										<view style="margin-bottom: 5px;font-size: 12px;color: #999;">{{item.lowest.name}}</view>
										<view>￥{{item.price}}</view>
									</view>
								</view>
								<view class="addNum">
									<view style="display: flex;align-items: center;">
										<img @click="computingNumItem(item,1)" v-if="item.orderNum !== 0" style="width: 15px;height: 15px;" src="@/static/jian.png" alt="">
										<view v-if="item.orderNum !== 0" style="margin: 0 4px;color: #000;font-size: 12px;">{{item.orderNum}}</view>
										<img @click="computingNumItem(item,2)" style="width: 15px;height: 15px;" src="@/static/jia.png" alt="">
									</view>
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
		</view>
		<view class="allPrice">
			<view class="carNum" @click="showModal = true">
				<img style="width: 30px;height: 25px;margin-right: 7px;" src="@/static/gouwu.png" alt="">
				<view class="position">{{getAllNum}}</view>
				<view>￥{{getAllPrice}}</view>
			</view>
			<view class="priceButton" @click="toDetail">立即下单</view>
		</view>
	</view>
</template>

<script>
	import { categorys,commodityList } from '@/api/home.js'
	export default {
		data() {
			return {
				showModal:false,
				list: [],
				activeGoods:[],
				total:0,
				page:1,
				pageSize:10,
				active: 0,
				goods:[]
			}
		},
		computed:{
			getAllNum () {
				return this.activeGoods.reduce(function (prev, cur, index, arr) {
				    return Number(prev) + cur.orderNum;
				},0);
			},
			getAllPrice () {
				return this.activeGoods.reduce(function (prev, cur, index, arr) {
				    return (Number(prev) + cur.orderNum * Number(cur.price)).toFixed(1);
				},0);
			}
		},
		onShow() {
			let cardList = uni.getStorageSync('card')?JSON.parse(uni.getStorageSync('card')):[]
			if(cardList.length>0){
				cardList.map(item=>{
					let findIndex = this.activeGoods.findIndex(demo=>{return demo.lowest.id === item.lowest.id})
					if(findIndex>=0){
						this.activeGoods[findIndex] = item
					}else{
						this.activeGoods.push(item)
					}
				})
			}else{
				this.activeGoods = []
				this.goods.map(item=>{
					item.orderNum = 0
				})
			}
		},
		onLoad(options) {
			if(options.id) this.active = options.id
			categorys().then(res=>{
				this.list = res.data
				this.getGoods()
			})
		},
		methods: {
			toGoodsDetail(id) {
				uni.navigateTo({
					url:'/pages/detail/index?id='+id+'&ca_id='+this.active
				})
			},
			removeClick() {
				this.activeGoods = []
				this.goods.map(item=>{
					item.orderNum = 0
				})
				uni.removeStorageSync('card')
				this.showModal = false
			},
			toDetail() {
				if(!this.activeGoods.length-1 === 0) return uni.showToast({
					title: '请选择商品',
					icon:'none'
				})
				let data = []
				this.activeGoods.map(item=>{
					data.push({
						id: item.id,
						skuId: item.lowest.id,
						image:item.goodsImage,
						name: item.name,
						price: item.price,
						num: item.orderNum,
						ca_id:item.ca_id
					})
				})
				uni.navigateTo({
					url:'/pages/submitted/index?data='+JSON.stringify(data)
				})
			},
			isDown() {
				this.page += 1
				this.getGoods()
			},
			getGoods(id) {
				let data = {
					categoryId: this.active,
					page: this.page,
					pageSize: this.pageSize,
				}
				commodityList(data).then(res=>{
					res.data.items.map(item=>{
						let index = this.activeGoods.findIndex(demo=>{return item.id === demo.id})
						if(index>=0){
							item.orderNum = this.activeGoods[index].orderNum
						}else{
							item.orderNum = 0
						}
						let config = []
						console.log(res.data.items,item,item.sort_skus,'item.sort_skus')
						item.sort_skus && item.sort_skus.map(demo=>{
							config.push(demo.name)
						})
						item.skus = item.sort_skus
						item.skuName = config.join(',')
						item.goodsImage = item.images[0]
						item.price = item.lowest.price
						this.goods.push(item)
					})
					this.total = res.data.total
					
				})
			},
			computingNumItem(item,type) {
				this.activeGoods.map(demo=>{
					if(demo.lowest.id === item.lowest.id) {
						if(type === 1 && item.orderNum >=0) item.orderNum -= 1
						if(type === 2) item.orderNum  += 1
					}
				})
				this.activeGoods.map((demo,index)=>{
					if(demo.orderNum <=0) this.activeGoods.splice(index,1)
				})
				uni.setStorageSync('card',JSON.stringify(this.activeGoods))
			},
			computingNum(item,type) {
				let arr = this.activeGoods
				this.goods.map(demo=>{
					if(demo.id === item.id) {
						if(type === 1 && item.orderNum >=0) item.orderNum -= 1 
						if(type === 2) item.orderNum  += 1
						if(arr.findIndex(t=>{return t.id === item.id})>=0){
							arr[arr.findIndex(t=>{return t.id === item.id})] = item
						}else{
							arr.push(item)
						}
					}
				})
				arr.map((item,index)=>{
					if(item.orderNum === 0) {
						arr.splice(index,1)
					}else{
						let findSku = item.skus.findIndex(demo=>{return demo.id === item.lowest.id})
						item.skus[findSku].orderNum = item.orderNum
					}
					item.skus = item.skus
				})
				this.activeGoods = arr
				uni.setStorageSync('card',JSON.stringify(arr))
			},
			changeSlider(item,index) {
				this.active = item.id
				this.page = 1
				this.goods = []
				this.getGoods()
			}
		}
	}
</script>

<style scoped lang="less">
	::v-deep ::-webkit-scrollbar {
		display: none;
		width: 0;
		height: 0;
		color: transparent;
	}
	.modal{
		position: fixed;
		width: 100%;
		top: 0;
		left: 0;
		z-index: 100;
		background-color: rgba(0,0,0,0.3);
		height: 90vh;
		display: flex;
		align-items: flex-end;
		.modalContainer{
			background-color: #fff;
			width: 100%;
			padding: 15px;
			.title{
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 15px;
			}
			.goods{
				width: 100%;
				box-sizing: border-box;
				justify-content: space-between;
				background-color: #fff;
				display: flex;
				flex-wrap: wrap;
				.goodsScroll{
					height: 100%;
					.goodsItem:nth-last-child(0){
						border: 0;
						padding-bottom: 0;
					}
					.goodsItem{
						width: 100%;
						display: flex;
						font-size: 14px;
						margin: 10px 0;
						align-items: center;
						justify-content: space-between;
						border-bottom: 1px solid #f5f5f5;
						padding-bottom: 10px;
						.itemName{
							margin: 6px 0;
						}
						.addNum{
							display: flex;
							justify-content: space-between;
							align-items: center;
						}
					}
				}
			}
		}
	}
	.category{
		height: 100vh;
		background-color: #f5f5f5;
		overflow: hidden;
	}
	.allPrice{
		height: 10vh;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-top: 1px solid #f5f5f5;
		background-color: #fff;
		padding: 0 20px 2vh;
		box-sizing: border-box;
		.carNum{
			display: flex;
			align-items: center;
			font-weight: bold;
			font-size: 16px;
			position: relative;
			.position{
				position: absolute;
				left: 32rpx;
				top: -18rpx;
				background:red;
				border-radius: 50%;
				width: 26px;
				height: 26px;
				line-height: 26px;
				transform: scale(.6);
				color: #fff;
				text-align: center;
				font-size: 16px;
			}
			img{
				margin-right: 5px;
			}
		}
		.priceButton{
			padding: 8px 20px;
			background-color: #2c6cf4;
			color: #fff;
			font-size: 14px;
			border-radius: 6px;
		}
	}
	.container{
		display: flex;
		height: 90vh;
		overflow: hidden;
		.slider{
			width: 100px;
			.sliderItem{
				padding: 15px 10px;
				font-size: 14px;
				box-sizing: border-box;
			}
			.sliderItemActive{
				padding: 15px 10px;
				font-size: 14px;
				box-sizing: border-box;
				background-color: #fff;
			}
		}
		.goods{
			width: 100%;
			height: 90vh;
			overflow-y: auto;
			padding: 20px 60rpx;
			box-sizing: border-box;
			justify-content: space-between;
			background-color: #fff;
			display: flex;
			flex-wrap: wrap;
			.goodsScroll{
				height: 100%;
				.goodsItem{
					width: 200rpx;
					border-radius: 4px;
					overflow: hidden;
					font-size: 14px;
					margin-bottom: 10px;
					.itemName{
						margin: 6px 0;
					}
					.addNum{
						display: flex;
						justify-content: space-between;
						align-items: center;
					}
				}
			}
		}
	}
	.hideOne{
		overflow:hidden;//超出的隐藏
		text-overflow:ellipsis;//省略号
		white-space:nowrap;//强制一行显示
	}
	.hideTwo{
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		/*! autoprefixer: off */
		-webkit-box-orient: vertical;
	}
</style>
